<template>
    
    <el-popover  placement="bottom" width="350" trigger="click" class="">
        <el-row>
            <exInput v-model="key" placeholder="输入名称/字母/代码" width="150" size="mini" @keyup.native="queryInfo"></exInput>
            <!-- <el-button icon="el-icon-search" circle size="mini" @click="queryInfo"></el-button> -->
        </el-row>
        <el-row v-for="(item,idx) in list" :key="idx" class=" mt5 fsize">
            <span class="resspan">
                <exInput v-model="item.name" width="140" size="mini"></exInput>
            </span>
            <span class="resspan ml10">{{item.code}}</span>
            <span class="resspan ml10">{{item.marketName}}</span>
            <span class="resspan ml10">{{item.type}}</span>
            <el-link type="primary" class="ml10" @click.native.prevent="addToFav(item)">添加收藏</el-link>

            <!-- <span class="resspan ml10">{{item.type}}</span>
            <i class="el-icon-star-off black ml10" @click="addToFav(item)"></i> -->
        </el-row>
        <el-button slot="reference" type="text" class="ml10" size="mini">搜索股票/基金/板块</el-button>
    </el-popover>
</template>

<script>

export default {
    data() {
        return {
            key:"",
            list: [],
        }
    },
    inject: ['cfg',"isQry"],
    

    mounted() {
    },

    methods: {
        saveConfig(){
            this.$emit("saveConfig")
        },
        addToFav(item){
            if(item.type=="stock"){
                this.addStockItem(item);
            }else if(item.type=="jj"){
                this.addJJItem(item);
            }else if(item.type=="bk"){
                this.addBKItem(item);
            }
        },
        addJJItem(selitem){
            var list = this.cfg.jjList;
            var tmplist = list.filter((item)=>{return item.code == selitem.code})
            if(tmplist.length>0){
                this.$message.error("已存在");
                return;
            }
            var tmpname = selitem.name;
            if(tmpname.length>5){
                tmpname = tmpname.substring(0,5)
            }
            var item = {
                code:selitem.code,
                name:tmpname,
                rate:""
            };
            list.push(item);
        },
        addBKItem(selitem){
            var list = this.cfg.bkList;
            var tmplist = list.filter((item)=>{return item.code == selitem.code})
            if(tmplist.length>0){
                this.$message.error("已存在");
                return;
            }
            var item = {
                code:selitem.code,
                name:selitem.name,
                rate:""
                };
            list.push(item);
        },
        addStockItem(selitem){
            var list = this.cfg.favList;
            var tmplist = list.filter((item)=>{return item.c == selitem.code})
            if(tmplist.length>0){
                this.$message.error("已存在");
                return;
            }
            var tmpname = selitem.name;
            if(tmpname.length>4){
                tmpname = tmpname.substring(0,4)
            }
            var item = {
                "c":selitem.code,"n":tmpname,"p":"","r":"","watch":false
                };
            list.push(item);
        },
        queryInfo(){
            this.list=[];
            if(!this.key) return;
            this.$axios.get(`http://searchapi.eastmoney.com/api/suggest/get?input=${this.key}&type=14&token=D43BF722C8E33BDC906FB84D85E326E8&count=10&`+Math.random())
            .then((res) => {
                try{
                    var tmplist = res.data.QuotationCodeTable.Data;
                    tmplist.map((item)=>{
                        if(item.SecurityType==1){
                            item.type="stock"
                        }else if(item.SecurityType==2 || item.SecurityType==8 || item.SecurityType==25){
                            item.type="stock"
                        }else if(item.SecurityType==17){
                            item.type="jj"
                        }else if(item.SecurityType==9){
                            item.type="bk"
                        }
                        if(!item.type) return;
                        this.list.push({
                            code: item.Code,
                            name: item.Name,
                            type: item.type,
                            marketType: item.MarketType,
                            marketName: item.SecurityTypeName,
                        })
                    })
                }catch(ex){
                    this.$message.error(ex.message);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>

    .resspan{
        display: inline-block;
        // min-width: 60px;
        text-align: right;
    }
</style>
